import React from 'react'
import ReactDOM from 'react-dom'
import Input from './input'
import TodoList from './todolist'

class App extends React.Component {
    state = {
        todoItem: '',
        todoList: []
    }
    change = (e) => {
        this.setState({ todoItem: e.target.value })
    }
    submit = () => {
        let item = {
            id: Math.random(),
            value: this.state.todoItem
        }
        this.state.todoList.push(item)
        this.setState({ todoList: this.state.todoList })
        this.setState({todoItem: ''})
    }
    del = (todo) => {
        this.setState({ todoList: this.state.todoList.filter(item => item.id !== todo.id) })
    }
    render() {
        return (
            <>
                <Input
                    todoVal={this.state.todoItem}
                    changeTodo={this.change}
                    submitTodo={this.submit}
                ></Input>
                <TodoList todoList={this.state.todoList} del={this.del}></TodoList>
            </>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))